<script setup>
</script>

<template>
  <div class="container mx-auto max-w-screen-sm bg-white font-sans">
    <main class="pb-24">
      <header class="bg-white pt-3 sticky top-0 z-10">
        <div class="flex justify-between items-center px-4 pb-2">
          <div class="relative">
            <h1 class="text-2xl font-bold">发现</h1>
            <div class="absolute bottom-[-2px] left-0 w-full h-1 bg-blue-500 rounded-full w-[24px]"></div>
          </div>
          <div class="flex items-center space-x-4">
            <div class="flex items-center text-sm">
              <span class="iconify text-gray-700" data-icon="ph:map-pin"></span><span class="ml-1">上海</span><span class="iconify text-gray-500" data-icon="mdi:chevron-down"></span>
            </div>
            <span class="iconify text-2xl text-gray-800" data-icon="mi:search"></span>
          </div>
        </div>
        <nav class="px-4 py-2">
          <div class="flex space-x-6 overflow-x-auto whitespace-nowrap">
            <a href="#" class="text-black font-bold text-base">热门</a><a href="#" class="text-gray-500 text-base">境外</a><a href="#" class="text-gray-500 text-base">景区</a><a href="#" class="text-gray-500 text-base">山川</a><a href="#" class="text-gray-500 text-base">海岛</a><a href="#" class="text-gray-500 text-base">citywalk</a>
          </div>
        </nav>
      </header>

      <div class="p-4 bg-gray-50">
        <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col gap-3">
            <div class="bg-white rounded-lg overflow-hidden shadow-sm">
              <div class="relative">
                <img src="https://images.unsplash.com/photo-1700224732905-64673adc26e6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=M3w3MjkzNDZ8MHwxfHNlYXJjaHwzfHxDaGluZXNlJTIwZ2FyZGVuJTIwcG9uZHxlbnwwfHx8fDE3NTg1OTQxNzJ8MA&ixlib=rb-4.1.0&q=80&w=200&h=267" class="w-full h-auto object-cover">
                <div class="absolute top-2 left-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full">路线</div>
                <div class="absolute top-2 right-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full flex items-center">
                  <span class="iconify mr-1" data-icon="mdi:eye-outline"></span>813
                </div>
                <div class="absolute bottom-2 left-2 text-white text-sm font-semibold flex items-center bg-black bg-opacity-30 px-1 rounded">
                  <span class="iconify mr-1" data-icon="ph:map-pin-fill"></span>苏州市
                </div>
              </div>
              <div class="p-2">
                <h3 class="font-bold text-sm truncate">网师园|沧浪亭|十全街漫游</h3>
                <p class="text-gray-500 text-xs mt-1">网师园夜游偷师昆曲腔, 沧浪亭漏窗框住宋朝光影🌙</p>
              </div>
            </div>

            <div class="bg-white rounded-lg overflow-hidden shadow-sm">
              <div class="relative">
                <img src="https://spark-builder.s3.cn-north-1.amazonaws.com.cn/image/2025/9/23/90ba7301-eb86-4123-a02f-7c0fb8d8d206.png" class="w-full h-auto object-cover">
                <div class="absolute top-2 right-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full flex items-center">
                  <span class="iconify mr-1" data-icon="mdi:eye-outline"></span>104
                </div>
                <div class="absolute bottom-2 left-2 text-white text-sm font-semibold flex items-center bg-black bg-opacity-30 px-1 rounded">
                  <span class="iconify mr-1" data-icon="ph:map-pin-fill"></span>荆州市
                </div>
              </div>
              <div class="p-2">
                <h3 class="font-bold text-sm truncate">神农架秘境导览</h3>
                <p class="text-gray-500 text-xs mt-1">华中屋脊·土家原乡·高山湿地·神农祭祀🌲</p>
              </div>
            </div>

            <div class="bg-white rounded-lg overflow-hidden shadow-sm">
              <div class="relative">
                <img src="https://images.unsplash.com/photo-1754547252699-07bf218643db?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=M3w3MjkzNDZ8MHwxfHNlYXJjaHwyfHxDaGluZXNlJTIwY3Vpc2luZSUyMGZsYXQlMjBsYXl8ZW58MHx8fHwxNzU4NTk0MTc0fDA&ixlib=rb-4.1.0&q=80&w=400&h=200" class="w-full h-auto object-cover">
                <div class="absolute top-2 right-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full flex items-center">
                  <span class="iconify mr-1" data-icon="mdi:eye-outline"></span>396
                </div>
              </div>
              <div class="p-2">
                <h3 class="font-bold text-sm truncate">神农架美食记</h3>
                <p class="text-gray-500 text-xs mt-1">地道土家菜，品尝山野的味道</p>
              </div>
            </div>
          </div>

          <div class="flex flex-col gap-3">
            <div class="bg-white rounded-lg overflow-hidden shadow-sm">
              <div class="relative">
                <img src="https://images.unsplash.com/photo-1671355823934-f4b890500040?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=M3w3MjkzNDZ8MHwxfHNlYXJjaHwxfHxKYXBhbmVzZSUyMG1vdW50YWluJTIwdmlsbGFnZXxlbnwwfHx8fDE3NTg1OTQxNzF8MA&ixlib=rb-4.1.0&q=80&w=200&h=222" class="w-full h-auto object-cover">
                <div class="absolute top-2 left-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full">景点</div>
                <div class="absolute top-2 right-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full flex items-center">
                  <span class="iconify mr-1" data-icon="mdi:eye-outline"></span>78
                </div>
                <div class="absolute bottom-2 left-2 text-white text-sm font-semibold flex items-center bg-black bg-opacity-30 px-1 rounded">
                  <span class="iconify mr-1" data-icon="ph:map-pin-fill"></span>日本
                </div>
              </div>
              <div class="p-2">
                <h3 class="font-bold text-sm truncate">长野新泻周游券深度游</h3>
                <p class="text-gray-500 text-xs mt-1">玩转长野新泻:泡猴汤、访古寺、尝地酒五日巡礼🚄</p>
              </div>
            </div>

            <div class="bg-white rounded-lg overflow-hidden shadow-sm">
              <div class="relative">
                <img src="https://images.unsplash.com/photo-1699177247360-3540d424e739?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=M3w3MjkzNDZ8MHwxfHNlYXJjaHwxfHxwaW5rJTIwY2h1cmNoJTIwVmlldG5hbXxlbnwwfHx8fDE3NTg1OTQxNzB8MA&ixlib=rb-4.1.0&q=80&w=200&h=333" class="w-full h-auto object-cover">
                <div class="absolute top-2 right-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full flex items-center">
                  <span class="iconify mr-1" data-icon="mdi:eye-outline"></span>102
                </div>
                <div class="absolute bottom-2 left-2 text-white text-sm font-semibold flex items-center bg-black bg-opacity-30 px-1 rounded">
                  <span class="iconify mr-1" data-icon="ph:map-pin-fill"></span>越南·胡志明市
                </div>
              </div>
              <div class="p-2">
                <h3 class="font-bold text-sm truncate">胡志明懒人地图</h3>
                <p class="text-gray-500 text-xs mt-1">粉红教堂×金融塔漫游·玩透法式南洋风情✨</p>
              </div>
            </div>

            <div class="bg-white rounded-lg overflow-hidden shadow-sm">
              <div class="relative">
                <img src="https://images.unsplash.com/photo-1678200828429-83baf1a366fc?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=M3w3MjkzNDZ8MHwxfHNlYXJjaHwxfHxDaGluZXNlJTIwcm9vZiUyMHNreXxlbnwwfHx8fDE3NTg1OTQxNzN8MA&ixlib=rb-4.1.0&q=80&w=400&h=267" class="w-full h-auto object-cover">
                <div class="absolute top-2 right-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full flex items-center">
                  <span class="iconify mr-1" data-icon="mdi:eye-outline"></span>660
                </div>
              </div>
              <div class="p-2">
                <h3 class="font-bold text-sm truncate">屋檐下的天空</h3>
                <p class="text-gray-500 text-xs mt-1">古建筑之美，仰望一片蔚蓝</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <footer class="fixed bottom-0 left-0 right-0 max-w-screen-sm mx-auto h-16 bg-white border-t border-gray-200 shadow-[0_-2px_5px_rgba(0,0,0,0.05)] z-20">
        <div class="flex justify-around items-center h-full relative">
          <a href="#" class="flex flex-col items-center text-blue-500"><span class="iconify text-2xl" data-icon="ant-design:home-filled"></span><span class="text-xs font-semibold">首页</span></a>
          <a href="#" class="flex flex-col items-center text-gray-500"><span class="iconify text-2xl" data-icon="ph:globe-hemisphere-west-light"></span><span class="text-xs">目的地</span></a>
          <div class="w-12 h-12"></div>
          <a href="#" class="flex flex-col items-center text-gray-500"><span class="iconify text-2xl" data-icon="ph:suitcase-simple-light"></span><span class="text-xs">行程</span></a>
          <a href="#" class="flex flex-col items-center text-gray-500"><span class="iconify text-2xl" data-icon="ph:user-light"></span><span class="text-xs">我的</span></a>
          <div class="absolute -top-6 left-1/2 -translate-x-1/2">
            <div class="w-16 h-16 rounded-full bg-gradient-to-br from-yellow-300 to-orange-400 flex items-center justify-center shadow-lg">
              <span class="text-orange-800 font-bold text-lg" style="text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;">秋游</span>
            </div>
          </div>
        </div>
      </footer>
    </main>
  </div>
</template>

<style scoped>
</style>

